@import '@/styles/variables.scss';

$sideMenuSize: 200px;

.dt-cluster {
	height: 100%;

	.dt-cluster-component {
		> .ant-tabs-nav {
			margin-bottom: 0;
		}

		.dt-cluster-title {
			width: 200px;
			padding-left: 20px;
			color: #333;
			font-weight: bold;
			font-size: 14px;
		}

		.dt-cluster-component-tab-title {
			display: flex;
			align-items: center;
			height: 19px;
			font-size: 12px;
		}
	}

	.c-editCluster__container__componentTabs {
		height: calc(100vh - $statusBar-size - $menuBar-size - 55px - 59px - 48px);

		> .ant-tabs-nav {
			width: $sideMenuSize;
			padding: 20px 0 0;
			border-right: 1px solid var(--panel-border);
			box-shadow: 4px 0 6px 0 rgb(0 0 0 / 6%);

			.ant-tabs-tab {
				font-size: 12px;

				.ant-tabs-tab-btn {
					flex: 1;
					text-align: left;
				}

				&.ant-tabs-tab-active {
					background-color: rgba(36, 145, 247, 0.1);
				}
			}

			.ant-tabs-extra-content {
				width: 100%;
			}
		}

		.ant-tabs-content {
			height: 100%;
		}

		div.ant-tabs-content-holder .ant-tabs-tabpane {
			height: 100%;
			padding-left: 0;
		}

		.dt-cluster-content {
			position: relative;
			display: flex;
			width: 100%;
			height: 100%;
			font-size: 12px;
		}

		.c-toolbar__container {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			height: 40px;
			line-height: 40px;
			text-align: center;
			background: var(--editorGroupHeader-tabsBackground, #fff);
			border-top: 1px solid var(--panel-border);

			button {
				height: 28px;
				padding: 0 12px;
			}
		}
	}

	.empty-logo {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(100% - $sideMenuSize);
		height: 100%;

		> img {
			width: 200px;
			height: 200px;
		}
	}
}
